@import url('https://fonts.googleapis.com/css?family=Tangerine');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&family=Rubik+Broken+Fax&family=Suez+One&display=swap');


header{
    position: fixed;
    top: 0px;
    left: 2vw;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    z-index: 99;
    direction: ltr;
}


#logo{
    position: fixed;
    top: 1vw;
    left: 1.5vw;
    z-index: 100;
    width: 7vw;
    height: auto;
    animation: rotate 26s linear infinite;
}

@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

.navigation a {
position: relative;
font-size: 1.5em;
color:#fff;
text-decoration:none;
font-weight: 500;
margin-left: 40px;
}

.navigation a::after {
    content:'';
    position:absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background:#fff ;
    border-radius: 5px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .5s;
}

.navigation a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}


.navigation .btnLogin-popup {
    width: 130px;
    height: 50px;
    background: transparent;
    border: 2px solid;
    color: #fff;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4em;
    color: #fff;
    font-weight: 600;
    margin-left: 73px;
    margin-right: 52px;
    transition: .5s;
}

.navigation .btnLogin-popup:hover {
    background:#fff;
    color:rgb(115 87 83);
}